<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="state.query">
                    <el-form-item label="用户编号">
                        <el-input clearable v-model="state.query.id" placeholder="请输入用户编号" />
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-select clearable v-model="state.query.isAccredit" placeholder="角色类别">
                            <el-option label="普通用户" value="0" />
                            <el-option label="授权商" value="1" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="手机号">
                        <el-input clearable v-model="state.query.cellPhone" placeholder="请输入手机号" />
                    </el-form-item>

                    <el-form-item label="角色状态">
                        <el-select clearable v-model="state.query.status" placeholder="角色状态">
                            <el-option label="使用" value="1" />
                            <el-option label="停用" value="0" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="init">搜索</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="state.userList" border style="width: 100%">
                    <el-table-column prop="id" label="编号" align="center"/>
                    <el-table-column label="头像" align="center">
                        <template #default="props">
                            <el-avatar :size="50" :src="props.row.imageUrl" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickName" label="用户昵称" align="center"></el-table-column>
                    <el-table-column prop="cellPhone" label="手机号" align="center" />
                    <el-table-column prop="userName" label="用户姓名" align="center" />
                    <el-table-column prop="isAccredit" label="是否授权商" align="center">
                        <template #default="props">
                            <el-tag>{{ props.row.isAccredit === 1 ? '授权商' : '普通用户' }}</el-tag>
                        </template>
                    </el-table-column>
									<el-table-column prop="accreditCode" label="授权代码" align="center">
										<template #default="props">
											{{ props.row.accreditCode === null ? '-' : props.row.accreditCode }}
										</template>
									</el-table-column>
                    <el-table-column prop="roleType" label="角色类型" align="center">
                        <template #default="props">
                            <el-tag>{{ props.row.roleType === 0 ? '自营' : '用户' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="角色状态" align="center">
                        <template #default="props">
                            {{ props.row.status === 1 ? '使用中' : '停用' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="详情操作" align="center">
                        <template #default="props">
                            <el-button link type="primary" size="small" @click="update(props.row)">修改</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <div class="pagination-container">
            <el-pagination
                :page-size="state.pageValidate.pageSize"
                layout="prev, pager, next"
                :total="state.pageValidate.total"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog
            v-model="state.updateDialogVisible "
            title="修改用户信息"
            width="30%"
        >
            <el-form :model="state.updateFrom" label-width="auto" style="max-width: 600px">
                <el-form-item label="用户昵称">
                    <el-input v-model="state.updateFrom.nickName" />
                </el-form-item>
							<el-form-item label="真实姓名">
								<el-input v-model="state.updateFrom.userName" />
							</el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="state.updateFrom.cellPhone" />
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="/api/file/adminUpload?type=4"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        accept=".jpg,.png"
                    >
                        <img v-if="state.updateFrom.imageUrl" :src="state.updateFrom.imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item label="状态">
                    <el-radio-group v-model="state.updateFrom.status">
                        <el-radio value='1'>有效</el-radio>
                        <el-radio value='0'>停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="角色类型">
                    <el-radio-group v-model="state.updateFrom.roleType">
                        <el-radio value='1'>用户</el-radio>
                        <el-radio value='0'>自营</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateFrom">确 定</el-button>
      </span>
            </template>
        </el-dialog>

    </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps } from 'element-plus';
import {postRequest} from "~/composables/http";

const state = reactive(<any>{
    updateDialogVisible: false,
    pageValidate: {
        pageNo: 1,
        pageSize: 8,
        total: 0
    },
	query: {
		id: null,
		isAccredit: null,
		cellPhone: null
	},
    userList: [],
    updateFrom: {}
});

function init() {
	postRequest('/api/admin/user/page', {
        pageValidate: { pageValidate: state.pageValidate },
        params: state.query
    }).then((res: any) => {
        state.userList = res.data.lists;
        state.pageValidate.pageNo = res.data.pageNo;
        state.pageValidate.pageSize = res.data.pageSize;
        state.pageValidate.total = res.data.count;
    });
}

/**
 * 头像上传
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
    //显示视频
    state.updateFrom.imageUrl = response.data.url;
};

/**
 * 修改用户信息
 */
function updateFrom() {
	postRequest('/api/admin/user/update',state.updateFrom).then(() =>{
		ElMessage.success("修改成功")
		init()
		state.updateDialogVisible = false;
    })
}

/**
 * 修改
 */
function update(data: any) {
    state.updateDialogVisible = true;
    state.updateFrom.id = data.id;
    state.updateFrom.nickName = data.nickName;
    state.updateFrom.userName = data.userName;
    state.updateFrom.cellPhone = data.cellPhone;
    state.updateFrom.imageUrl = data.imageUrl;
    state.updateFrom.status = data.status.toString();
    state.updateFrom.roleType = data.roleType.toString();
}
/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
    state.pageValidate.pageNo = val;
    init();
};

init();

</script>
<style scoped>

:deep(.el-form-item__content)  {
    width: 150px;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* 可根据需要调整外边距 */
}

:deep(.avatar-uploader .el-upload)  {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover)  {
    border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon)  {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
